<template>
  <q-btn icon="camera_alt" @click="visible = true">
    <q-dialog persistent maximized v-model="visible">
      <q-card dark class="column">
        <q-card-section class="row items-center q-pb-none">
          <q-space />
          <q-btn icon="close" class="text-h5" flat round dense v-close-popup />
        </q-card-section>
        <q-card-section class="col-10" v-if="photoUrl">
          <div class="full-height full-width">
            <img
              class="absolute-center"
              :src="photoUrl"
              alt="无效照片"
              style="width: auto; height: 100%"
            />
          </div>
        </q-card-section>
        <q-card-section
          class="col-10 text-h3 text-grey-6"
          style="letter-spacing: 5px"
          v-else
        >
          <strong class="absolute-center">{{ txt }}</strong>
        </q-card-section>
      </q-card>
    </q-dialog>
  </q-btn>
</template>

<script setup>
import { watch, ref } from "vue";
import { api } from "boot/axios.js";
import { useAPIStore } from "stores/api";
const visible = ref(false);
const photoUrl = ref("");
const txt = ref("暂无图片获取");

watch(visible, (value) => {
  if (value) {
    getPhoto();
  } else {
    photoUrl.value = "";
  }
});

function getPhoto() {
  txt.value = "图片获取中。。。";
  api
    .get("http://" + useAPIStore().deviceIP + ":8989/cap")
    .then((res) => {
      photoUrl.value = "data:image/png;base64," + res.data.base64;
    })
    .catch(() => {
      txt.value = "暂无图片获取";
    });
}
</script>
